<template>
    <!--左边 echars    右边司机按照评分排行前5 -->
    <div id="carMain" class="clear">

        <div class="clear">
            <div class="left">
                <echartPic></echartPic>
            </div>
            <div class="right">
                <p class="paihang">司机排行</p>
                <el-table class="xiajuli" :data="dangqianyeTableData" border style="width: 100%">
                    <el-table-column prop="num" label="司机排名">
                    </el-table-column>
                    <el-table-column prop="user_name" label="司机姓名">
                    </el-table-column>
                    <el-table-column prop="evaluation" label="司机总评分">
                    </el-table-column>
                </el-table>
                <!-- <p>司机个人排行</p> -->
                <el-pagination background align="center" :current-page="elPage" @current-change=elChangePage
                    :page-size=pageSize layout="prev,pager,next" :total="sijidata.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    import echartPic from '../../components/car/echartPic'
    export default {
        name: 'shouye',
        components: {
            echartPic
        },

        data() {
            return {

                pageSize: 7,
                elPage: 1,
                dangqianyema: 1,
                sijidata: []
            }
        },
        computed: {
            dangqianyeTableData() {
                let kaishi = (this.elPage - 1) * this.pageSize;
                return this.sijidata.slice(kaishi, kaishi + this.pageSize)
            }
        },
        created() {
            this.axios({
                url: api.GET_RANKINGDRIVER,
                method: 'get',
                params: {}
            }).then(data => {
                // console.log(data)
                this.sijidata = data.data.data
            })
        },
        methods: {
            elChangePage(val) {
                // console.log('当前页是第'+ val +'页');
                this.elPage = val
            },
        },
    }
</script>

<style lang="less" scoped>
    /deep/.el-table--border th.gutter:last-of-type {
        display: block !important;
        width: 17px !important;
    }

    #carMain {
        padding: 1rem;
    }

    .left {
        float: left;
        width: 63%;
        height: 50rem;
    }

    .right {
        float: right;
        text-align: center;
        width: 35%;
        height: 50rem;
        // border: 1px solid red;
    }
     /deep/.el-table .cell {
    text-align: center;
  }
  
</style>
<style>
    /* 分页 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgb(148, 197, 238);
    color: #FFF;
}

.el-pagination.is-background .el-pager li.active {
    color: #fff;
    cursor: default;
}

.el-pagination.is-background .el-pager li:hover {
    color: rgb(148, 197, 238);
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: rgb(148, 197, 238);
}

.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: rgb(148, 197, 238);
    color: #FFF;
}
</style>